<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" href="../../img/1.jpg">
		<style type="text/css">
			body {
				margin: 0;
				background-color: #121c4c;
			}
			.font {
				margin: 100px auto;
				width: 90%;
				height: 300px;
				color: #b022d3;
				line-height: 300px;
				text-align: center;
				font-size: 60px;
				font-weight: 800;
			}
			.font span {
				display: inline-block;
				cursor: pointer;
			}
			.color{
				animation: changecolor 2s 2 linear alternate;
			}
			@keyframes changecolor{
				50% {
					color: #FFD700;
					transform: scale(3);
				}
				to {
					color: #ff0004;
					transform: scale(.5);
				}
			}
		</style>
	</head>
	<body>
		<div class="font"></div>
		<script type="text/javascript">
			let school = '秦皇岛职业技术学院欢迎你';
			let sc = school.split('') //把字符串转换成一个数组，不写空字符串是转换为一个元素
			let font = document.querySelector('.font') //获取我们dom div
			sc.forEach(function(item){
			let span = document.createElement('span') //这是生成一个span元素
				span.innerHTML = item  //给span元素内容赋值 
				font.appendChild(span)  //div中添加span元素
				span.addEventListener('mousemove',function(){ 
		//给每一个span都添加一个鼠标经过的事件监听
					this.classList.add('color')//添加一个color这个类名
				})
				span.addEventListener('animationend',function(){
		//给每一个span都添加一个动画结束后的事件监听，动画结束后去掉color类名
					this.classList.remove('color')
				})
			})
		</script>
	</body>
</html>
